<template>
    <h3>侦听器</h3>
    <p>{{ message }}</p>
    <ul>
        <li v-for="(item, index) of names" :key="index">{{ item }}</li>
    </ul>
    <button @click="updateHandle">修改数据</button>
</template>

<script>
export default {
    data() {
        return {
            message: "Hello",
            names: ['iwen', 'ime', 'frank']
        }
    },
    methods: {
        updateHandle() {
            this.message = "World!"
            this.names.push("张三")
        }
    },
    watch: {
        // 对于基础数据类型，通过这种方式就可以侦听到其变化
        message(newVal, oldVal) {
            console.log("message数据变化", oldVal, newVal)
        },
        // 下列方法无法侦听到names数组的变化
        // names(newVal, oldVal) {
        //     console.log("names数据变化", oldVal, newVal)
        // },
        // 对于对象、数组数据类型，需要通过深层侦听方式才能侦听到其变化
        names: {
            handler(newVal, oldVal) {
                console.log("names数据变化", oldVal, newVal)
            },
            deep: true
        }
    }
}
</script>

